<script lang="ts" setup>
import { useAdminPayStore } from '../store/adminPay'
import { storeToRefs } from 'pinia'
const store = useAdminPayStore()
const { showType } = storeToRefs(store)
const { wechatPayData } = store
</script>

<template>
  <t-row v-show="showType === '1'" style="width: 100%">
    <t-col :lg="5" :md="6" :sm="12" :xl="5" :xs="12">
      <t-space class="left_space" direction="vertical">
        <t-form :data="wechatPayData" label-align="right" label-width="70px">
          <t-form-item label="商户号">
            <t-input v-model="wechatPayData.merchantId" placeholder="请输入商户号" />
          </t-form-item>

          <t-form-item label="AppID">
            <t-input v-model="wechatPayData.appid" placeholder="请输入绑定小程序或公众号的AppID" />
          </t-form-item>

          <t-form-item label="APIv3秘钥">
            <t-input
              v-model="wechatPayData.apiV3Key"
              placeholder="请输入32位APIv3秘钥"
              type="password"
            />
          </t-form-item>

          <t-form-item label="证书序列号">
            <t-input
              v-model="wechatPayData.merchantSerialNumber"
              placeholder="请输入平台证书序列号"
              type="password"
            />
          </t-form-item>

          <t-form-item label="商家私钥">
            <t-textarea
              v-model="wechatPayData.privateKey"
              :autosize="{ minRows: 2, maxRows: 3 }"
              placeholder="请输入商家秘钥 apiclient_key.pem"
              type="password"
            />
          </t-form-item>

          <t-form-item label="是否开启">
            <t-switch v-model="wechatPayData.status" :customValue="[1, 0]" />
          </t-form-item>
        </t-form>
      </t-space>
    </t-col>
    <t-col :lg="7" :md="6" :sm="12" :xl="7" :xs="12" class="right">
      <img alt="" class="img" src="@/assets/images/author/pay-bg.png" />
    </t-col>
  </t-row>
</template>

<style lang="less" scoped>
.left_space {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.right {
  display: flex;
  justify-content: center;
  align-items: center;

  img {
    width: 40%;
  }
}
</style>
